<template>
	<div class="home-box">
		<div class="preview_title_box">
			<span class="label">文件名称</span>
			<!-- <span>测试文件.docx</span> -->
			<span class="filename">{{filename}}</span>
		</div>
		<div class="upTop-box" @click="upTop">
			<img src="../../assets/image/置顶.png">
		</div>
		<div class="image-container" @scroll="scrollchange">
			<div class="pages-box">
				{{ (nowPage+1)+'/'+totalPage }}
			</div>
			<div v-for="(image,index) in renderImages" :key="index">
				<img :src="image" :alt="'Page ' + (index + 1)" :style="{'filter':color===0?'grayscale(1)':'none'}">
			</div>
			<div class="docxFile" :style="{'filter':color===0?'grayscale(1)':'none'}"></div>
		</div>
		
	</div>
</template>

<script>
import { useRoute } from 'vue-router';
import axios from 'axios';
import { covertPdfToimage } from '@/assets/js/pdf';
import { renderAsync } from 'docx-preview';
import html2canvas from 'html2canvas';
import mammoth from 'mammoth';
import VueOffice from 'vue-office';
// import MyReactComponent from '@/components/MyReactComponent';

export default {
  name: 'previewPdf',
  data(){
	return{
		renderImages:[],
		url:null,
		fileType:null,
		color:0,
		filename:null,
		htmlContext:'',
		nowPage:0
	}
  },
  computed:{
	totalPage(){
		return this.renderImages.length
	}
  },
  created(){
	const route=useRoute()
	console.log(route.query)
	this.url=route.query.url
	this.filename=route.query.filename
	this.color=Number(route.query.color)
	this.fileType=JSON.stringify(this.filename).split(".").at(-1)
  },
  mounted(){
	const url=this.url
	const filetype=url.split('.').at(-1)
	if(filetype==='pdf'){
		covertPdfToimage(url).then(data=>{
			data.forEach(image=>{
				this.renderImages.push(image)
				console.log("pdf imgdata",this.renderImages)
				// this.totalPage=this.renderImages.length
			})
		})
	}else if(filetype==='docx'){
		this.docxToHtml()
	}else if(filetype==='doc'){
		// this.docToHtml()
	}
	
  },
  methods:{
	// 回到浏览器页面顶部
	upTop(){
		document.querySelector(".image-container").scrollTop=0
	},
	scrollchange(event){
		const nowHeight=event.target.scrollTop
		const imgsHeight=[]
		const imgsElement=document.querySelector('.image-container').getElementsByTagName('img')
		for(let i=0;i<imgsElement.length;i++){
			const h=imgsHeight.length===0?imgsElement[i].height:imgsElement[i].height+imgsHeight[imgsHeight.length-1]
			imgsHeight.push(h)
		}
		let i=0
		imgsHeight.forEach((height,index)=>{
			// console.log(height,height*0.7)
			if(nowHeight>height*0.7){
				i=index+1
			}
		})
		this.nowPage=i>(imgsElement.length-1)?imgsElement.length-1:i
	},
	// docx类型文件转化为html
	async docxToHtml(){
		const that=this
		axios.get(that.url,{
			responseType:"blob"
		}).then(data=>{
			const docxFile=document.getElementsByClassName("docxFile")
			renderAsync(data.data,docxFile[0]).finally(()=>{
				that.htmlToPng()
			})
		})
	},
	// html转化为图片
	htmlToPng(){
		const that=this
		const docxs=document.getElementsByClassName("docxFile")[0].getElementsByTagName("section")
		for(var i=0;i<docxs.length;i++){
			html2canvas(docxs[i]).then(canvas=>{
				const imgData=canvas.toDataURL()
				that.renderImages.push(imgData)
				// console.log(that.renderImages)
			})
		}
	},
	docToHtml(){
		const that=this
		axios.get(that.url,{
			responseType:"arraybuffer"
		}).then(data=>{
			mammoth.convertToHtml({arrayBuffer:data.data}).then(htmldata=>{
				console.log("data",htmldata)
			})
		})
	}
  }
}
</script>

<style>
.home-box{
	height: 100vh;
	overflow: hidden;
	display: flex;
	position: relative;
	flex-direction: column;
}
.preview_title_box{
	background-color: #fff;
	padding: 10px 0;
	display: flex;
	flex-direction: row;
	width: 100%;
	top: 0;
	position: sticky;
    z-index: 100;
}
.preview_title_box .label{
	margin: 0 10px;
	font-weight: bold;
	white-space: nowrap;
}
.preview_title_box .filename{
	color: #0097e3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.upTop-box{
	position: fixed;
    background-color: #bbb;
    right: 3%;
    top: 70%;
	width: 10%;
	border-radius: 15%;
	z-index: 10000;
}
.upTop-box img{
	width: 100%;
    height: 100%;
    display: flex;
    padding: 10%;
    box-sizing: border-box;
}
.image-container{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 10px;
	overflow-y: scroll;
	/* height: 100vh; */
	/* border: 1px solid; */
	padding-bottom: 20px;
}
.image-container::-webkit-scrollbar{
	display: none;
}
.image-container .pages-box{
	position: fixed;
    left: 8%;
    top: 8%;
    background-color: #bbb;
    padding: 1% 3%;
    border-radius: 20px;
    color: #fff;
	font-size: 15px;
	opacity: 0.7;
	width: auto;
	z-index: 10000;
}
.image-container>div{
	display: flex;
	justify-content: center;
	margin-bottom: 10px ;
	width: 100%;
}
.image-container img{
	width: 95%;
}
.pdf-image{
	max-width: 100%;
	margin: 10px 0;
}
.docxFile{
	position: absolute;
	left: -99999999999999999999999px;
}
</style>
